<template>
	<div>
		<seller-tap>
			<span slot='font'>我的收藏</span>
			<a href="#/buller/self" class="fa fa-chevron-left" slot='a'></a>
		</seller-tap>
	
		
		<div v-if="likes.length<=0" class="noCun">
			<p>
				收藏夹是空的呢 (⊙o⊙)?
			</p>
		</div>	
		
		
		
		
		
		
		<div class="good">
			<ul>
				<li v-for="(item,ins) in likes">
					<a :href="'#/good/info/' + item.good_id._id+'?store=true'">
						<img :src="'http://localhost:2200'+item.good_id.avatar[0]"/>
						<div>
						<p>{{item.good_id.name}}</p>
						<p>{{item.good_id.describe}}</p>
							<p><span>{{item.good_id.send | sendC}}</span></p>
						<p><span>¥</span>{{item.good_id.price}} <span>{{item.good_id.cellNum}}人已付款</span></p>
							
						</div>
					</a>
				</li>
				
			</ul>
		</div>
		
		
	</div>
</template>

<script>
	import { mapState, mapGetters } from 'vuex'
	import axios from 'axios'
	import SellerTap from '../components/SellerTap'
	export default{
		data:function(){
			return {
				likes:[]
			}
		},
		components:{
			SellerTap,
		
		},
		computed:{
			...mapState([
				'seller', 'categorys', 'buller'
			]),
		},
		filters:{
			sendC(value){
			
				if(value == true){
					return '包邮'
				}else{
					return ''
				}
				
				
			}
		},
		mounted(){
			axios.get('/buller/myLikes').then((result)=>{
				this.likes = result.data.likes;
			}).catch((err)=>{
				console.log(err);
			})
		}
	}
</script>

<style scoped>
	.noCun{
		padding: 30px;
		text-align: center;
		color: #888888;
		
	}
	.good ul{
		overflow: hidden;
		
	}
	.good ul li{
		width: 100%;
		height: 140px;
		overflow: hidden;
		border-bottom: ;
	
	}
	.good ul li img{
		float: left;
		width: 30%;
		height:80%;
		margin-top: 5%;
	
	}
	.good ul li div{
		float: left;
		width: 60%;
		height: 100%;
		padding: 7% 1%;
		border-bottom:solid 1px #EEEEEE ;
		
		
	}.good ul li p{
		line-height: 18px;
		width: 100%;
		word-wrap: break-word;
		margin: 2px 0;
	}
	.good ul li div p:nth-child(1){
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.good ul li div p:nth-child(2){
		height: 30%;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 13px;
		color: #777;
	}
	
	.good ul li div p:nth-child(3) span{
		padding: 0px 2px;
		border: solid 1px goldenrod;
		border-radius: 12%;
		margin-right: 5px;
		font-size: 11px;
		color: goldenrod;
	}
	.good ul li div p:nth-child(4){
		color: red;
		font-size: 18px;
	}
	.good ul li div p:nth-child(4) span:first-child{
		font-size: 10px;
		
	}
	.good ul li div p:nth-child(4) span:last-child{
		font-size: 12px;
		color: #888;
		margin-left: 5px;
	}
	.good ul li div p:nth-child(5) a{
		display: block;
		width: 100%;
		color: #888;
		font-size: 13px;
	}
	.good ul li div p:nth-child(5) a span{
		color: #666;
		margin-left: 2%;
	}
	.good ul li div p:nth-child(5) a i{
		font-weight: 400;
		font-size: 10px;
		position: relative;
		top: -1px;
	}
</style>